<template>
  <!-- 预警报警纪录 -->
  <div class="warnRecord">
    <el-row :gutter="20"
            style="margin-top:20px">
      <el-form label-width="80px">
        <el-col :span="8">
          <el-form-item label="处理状态">
            <el-radio-group v-model="requestparam.dealStatus">
              <el-radio v-for="radio in disposeArr"
                        :key="radio.order_no"
                        :label="radio.order_no-1">{{radio.name}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="8">
          <el-form-item label="风险类型">
            <el-select v-model="requestparam.warnType"
                       placeholder="请选择风险类型">
              <el-option v-for="option in riskType"
                         :key="option.value"
                         :value="option.value"
                         :label="option.name"></el-option>
            </el-select>
          </el-form-item>
        </el-col> -->
        <el-col :span="8">
          <el-form-item label="消息时间">
            <el-date-picker v-model="timeVal"
                            type="daterange"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            :default-time="['00:00:00', '23:59:59']"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="24"
                class="space-between">
            <div>
              <el-button  type="primary" @click="batchProcessing">批量处理</el-button>
            </div>
          <div>
              <el-button type="primary"
                         @click="addList">新增</el-button>
              <el-button type="primary"
                         @click="search">查询</el-button>
              <el-button @click="reset">重置</el-button>
          </div>
        </el-col>
      </el-form>
    </el-row>
    <el-table :highlight-current-row="true"
              class="tableNav"
              border
              ref="multipleTable"
              :header-cell-style="{ background: '#f5f5f5' }"
              :data="riskList.list">
      <el-table-column type="selection"
                       width="55">
      </el-table-column>
      <el-table-column type="index"
                       label="序号"
                       sortable
                       align="center"
                       width="80"
                       show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="resource"
                       label="来源"
                       align="center"
                       show-overflow-tooltip>
      </el-table-column>
      <el-table-column label="内容"
                       prop="content"
                       align="center">
      </el-table-column>
      <el-table-column label="消息时间"
                       prop="msgTime"
                       align="center">
      </el-table-column>
      <el-table-column label="风险类型"
                       prop="warnType"
                       align="center">
        <template slot-scope="scope">
          <p>{{scope.row.warnType == 1?'预警':'告警'}}</p>
        </template>
      </el-table-column>
      <el-table-column label="状态"
                       prop="dealStatus"
                       align="center">
        <template slot-scope="scope">
          <p :style="{color:scope.row.dealStatus == 1 ? 'red' :'#606266'}">{{scope.row.dealStatus == 1? '待处理': '已处理'}}</p>
        </template>
      </el-table-column>
      <el-table-column label="处理回复"
                       prop="dealReply"
                       align="center">
      </el-table-column>
      <el-table-column label="风险数据"
                       prop="warnData"
                       align="center">
      </el-table-column>
      <!-- <el-table-column label="操作"
                       align="center">
        <template slot-scope="scope">
          <el-button type="text"
                     @click="dispose(scope.row)">标记为处理</el-button>
          <el-button type="text"
                     @click="editWarn(scope.row)">编辑</el-button>
          <el-button type="text"
                     @click="deteleWarn(scope.row)">删除</el-button>
        </template>
      </el-table-column> -->
    </el-table>
    <el-pagination @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="requestparam.pageNum"
                   :page-size="requestparam.pageSize"
                   :page-sizes="[10, 20, 30, 40]"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="riskList.total_count">
    </el-pagination>
    <el-dialog :title="types === 'add' ? '新增' :'编辑'"
               class="addDialog"
               :visible.sync="dialogFormVisible">
      <AddBusinessDialog @addDialog="callBack"
                         @add="saveBack"
                         :types='types'
                         :objRow="objRow"></AddBusinessDialog>
    </el-dialog>
  </div>
</template>

<script>
import { standardCodeApi } from "@/services/StandardCode";
import { MessageCenterApi } from '@/services/ProjectCenter';
import AddBusinessDialog from './components/AddBusinessDialog'

export default {

  components: { AddBusinessDialog },

  data () {
    return {
      types: '',
      timeVal: "",
      disposeArr: [], //处理状态
      objRow: '',
      dialogFormVisible: false,
      riskType: [],
      requestparam: {
        origin_id: '',
        dealStatus: '',
        warnType: '',
        msgTimeStart: '',
        msgTimeEnd: '',
        company_id: '',
        project_id: '',
        is_page: 1,
        pageNum: 1,
        pageSize: 10,
        msgType:1,
      },
      resetParam: {
        origin_id: '',
        dealStatus: '',
        warnType: '',
        msgTimeStart: '',
        msgTimeEnd: '',
        company_id: '',
        pageNum: 1,
        pageSize: 10,
        is_page: 1,
        msgType:1,
      },
      riskList: {
        list: [{
          name: '',
        }],
        total: 0,
        total_count: 0,
      },
    }
  },
  created () {
    this.getStandard()
    this.getTypeStandard()

    let store = this.$store.state.choosedProject
    let local = window.localStorage.getItem('choosedProject') || '{}'
    this.choosedProject = store.project_id ? store : JSON.parse(local)
    this.requestparam.project_id = this.choosedProject.project_id

  },
  mounted () {
    this.search()
  },
  methods: {
    // 风险类型标准码
    getTypeStandard () {
      return standardCodeApi.getConsoleStandardCode({
        params: {
          code_type: 'conlaborAlarmType',
          is_page: 0
        }
      }).then((res) => {
        if (res.code == 0) {
          this.riskType = res.data.list;
        }
      }).catch((error) => {
        console.log(error)
      });
    },
    callBack (val) {
      this.dialogFormVisible = val
      this.types = ''
    },
    //保存/编辑成功时
    saveBack (val) {
      if (val === 'success') {
        this.search()
        this.types = ''
      }
    },
    // 处理状态标准码
    getStandard () {
      return standardCodeApi.getConsoleStandardCode({
        params: {
          code_type: 'conlaborDeal_status',
          is_page: 0
        }
      }).then((res) => {
        if (res.code == 0) {
          this.disposeArr = res.data.list;
          console.log(this.disposeArr);
        }
      }).catch((error) => {
        console.log(error)
      });
    },
    search () {
      if (this.timeVal) {
        this.requestparam.msgTimeStart = this.timeVal[0]
        this.requestparam.msgTimeEnd = this.timeVal[1]
      }
      MessageCenterApi.getForewarnList({
        params: this.requestparam
      }).then((res) => {
        if (res.code == 0) {
          console.log(res);
          this.riskList = res.data;
          this.riskList.list.forEach((item)=>{
            let moment = require('moment');
            let t1=moment(item.msgTime).format('YYYY-MM-DD HH:mm:ss');
            item.msgTime=t1
          })
         
        }

      }).catch((error) => {
        console.log(error)
      });
    },
    reset () {
      let reset = JSON.parse(JSON.stringify(this.resetParam))
      this.requestparam = Object.assign(this.requestparam, reset)
      this.search()
    },
    handleSizeChange (val) {
      this.requestparam.pageSize = val
      this.search()
    },
    handleCurrentChange (val) {
      this.requestparam.pageNum = val
      this.search()
    },
    //新增
    addList () {
      this.types = 'add';
      this.dialogFormVisible = true
    },
    editWarn (row) {
      this.types = 'edit';
      this.objRow = JSON.stringify(row)
      this.dialogFormVisible = true;
    },
    //标记为处理
    dispose (row) {
      MessageCenterApi.disposeWarn({
        data: {
          alarm_ids: String(row.alarm_id),
          deal_status: '2'
        }
      }).then((res) => {
        if (res.code == 0) {
          this.$message.success('标记成功')
          this.search()
        }
      }).catch((error) => {
        console.log(error)
      });
    },
    deteleWarn (row) {
      MessageCenterApi.deteleWarnList({
        params: {
          alarm_id: row.alarm_id,
        }
      }).then((res) => {
        if (res.code == 0) {
          this.$message.success('删除成功')
          this.search()
        }
      }).catch((error) => {
        console.log(error)
      });
    },
    // 批量处理
    batchProcessing(){
     console.log( this.$refs.multipleTable.selection);
     if(this.$refs.multipleTable.selection.length>0){
      this.$refs.multipleTable.selection.forEach(item=>{
        item.readStatus=true
      })
      let warnRecords= this.$refs.multipleTable.selection
     MessageCenterApi.alterMessageForewarn({
      data: {
        msgType:1,
        warnRecords:warnRecords
      }
     }).then((res)=>{
      if(res.code===0){
        this.search()
      }
     }).catch((error) => {
        console.log(error)
      });
     }else{
      this.$message.warning("请选择之后再点击");
     }
    
    }

  },
  computed: {},
  watch: {
    '$store.state.choosedProject.project_id': function (val) {
      this.requestparam.project_id = val;
    },
  }
}
</script>

<style lang="scss" scoped>
.warnRecord {
  padding: 20px;
  .el-date-editor {
    width: 100%;
  }
  .el-input {
    width: 100%;
  }
  .el-select {
    width: 100%;
  }
  .el-table {
    margin-top: 20px;
  }
}
</style>
